<template>
    <div class="div_box">
        <div class="header">
            <div class="header_left">
                <el-input v-model="searchForm.identifier" clearable @clear="clearImei" placeholder="请输入标识符" size="small"
                    style="width: 220px" maxlength="20" oninput="value=value.replace(/[\u4e00-\u9fa5]/g,'')">
                    <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                        @click="searchClick">
                    </el-button>
                </el-input>

                <el-select v-model="searchForm.type" placeholder="消息类型" size="small"
                    style="width: 160px; margin-left: 15px" clearable @change="onChange">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <!-- <el-button size="small" @click="ownerAdd" class="el_button">关联业主
            </el-button> -->
        </div>
        <div class="content">
            <el-table :data="dataList" class="table" height="370" ref="refTable" row-key="id"
                :header-cell-style="headerStyle">
                <el-table-column align="center" label="序号" type="index" width="80" height="30">
                </el-table-column>
                <el-table-column align="center" prop="imei" label="设备编码" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="identifier" label="标识符" show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="type" label="消息类型" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <span v-if="row.type == 'lifetime'">生命周期</span>
                        <span v-else-if="row.type == 'state'">状态</span>
                        <span v-else-if="row.type == 'property'">属性</span>
                        <span v-else-if="row.type == 'event'">事件</span>
                        <span v-else-if="row.type == 'service'">服务</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="time" label="时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ formatTime(scope.row.time) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column align="center" prop="management" label="操作">
                    <template slot-scope="{ row }">
                        <el-tooltip class="item" effect="dark" content="取消关联" placement="bottom">
                            <i @click="delClick(row.id)" class="iconfont quxiaoguanlian tableBtnIcon"></i>
                        </el-tooltip>
                    </template>
                </el-table-column> -->
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="page" :limit.sync="limit"
                :pageSizes="[10, 20, 30, 50]" @pagination="getThingModelLog" class="pagination" />
        </div>

        <!-- <ownerAdd ref="refownerAdd" :deviceInfo="deviceInfo"></ownerAdd> -->
    </div>
</template>

<script>
import { reqThingModelLog, reqDeviceUserunBind } from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
// import ownerAdd from './ownerAdd.vue'
export default {
    props: {
        deviceInfo: {
            type: Object,
            default: () => { },
        },
    },
    components: {
        Pagination,
        // ownerAdd
    },
    mixins: [tableStyleMixin],
    data() {
        return {
            dataList: [],
            limit: 10,
            page: 1,
            total: 0,
            searchForm: {
                type: "",
                identifier: "",
            },
            loadingSearch: false,
            typeList: [{
                name: "生命周期",
                id: "lifetime"
            }, {
                name: "状态",
                id: "state"
            }, {
                name: "属性",
                id: "property"
            }, {
                name: "事件",
                id: "event"
            }, {
                name: "服务",
                id: "service"
            }]
        };
    },
    computed: { ...mapState(["user"]) },
    watch: {
    },
    methods: {
        // 时间格式化函数
        formatTime(time) {
            const date = new Date(time);
            return date.toLocaleString().replace(/\//g, '-');// 替换斜杠为破折号 // 转换为本地时间字符串
        },
        // 查询
        async searchClick() {
            this.page = 1;
            this.limit = 10;
            this.loadingSearch = true;
            await this.getThingModelLog();
            this.loadingSearch = false;
        },
        clearImei() {
            this.page = 1;
            this.limit = 10;
            this.getThingModelLog();
        },
        onChange() {
            this.page = 1;
            this.limit = 10;
            this.getThingModelLog();
        },
        async getThingModelLog() {
            const res = await reqThingModelLog(this.page, this.limit, {
                imei: this.deviceInfo.imei,
                type: this.searchForm.type,
                identifier: this.searchForm.identifier,
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // console.log(res);
            this.dataList = res.data.rows;
            this.total = res.data.total;
        },
        ownerAdd() {
            this.$refs.refownerAdd.dialogVisible = true;
        },
        // 解绑
        async delClick(id) {
            const result = await this.$confirm(
                "此操作将取消关联, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).catch(() => { });
            if (result !== "confirm") return;
            this.reqDelFun(id);
        },
        // 请求解绑
        async reqDelFun(id) {
            const res = await reqDeviceUserunBind(id);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("取消关联成功");
            this.getDeviceUsergetByImei();
        },
    },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");

.div_box {
    // height: calc(100vh - 212px);
    height: calc(100vh - 27vh);
    overflow: auto;
    width: 100%;
}

.header {
    display: flex;
    justify-content: space-between;

    .left {
        font-size: 15px;
        color: @primaryTxtcolor;
        margin-bottom: 20px;

        // display: flex;
        // justify-content: center;
        .label {
            margin: 10px 0px;

            .name {
                font-size: 16px;
            }
        }
    }

    .right {
        margin-right: 10px;
    }
}

.el_button.el-button--small {
    background: #7367f0;
    color: #fff;
    border: none;
}

.tableBtnIcon {
    font-size: 23px !important;
}
</style>